<script>
	import { spring } from 'svelte/motion';
	import { elasticOut } from 'svelte/easing';
	let m = { x: 0, y: 0 };
	function handleMousemove(event) {
		console.log(event);

		m.x = event.clientX;
		m.y = event.clientY;
	}
	function spin(node, { duration }) {
		return {
			duration,
			css: (t) => {
				const eased = elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`;
			}
		};
	}
	let coords = spring(
		{ x: 15, y: 15 },
		{
			stiffness: 0.1,
			damping: 0.25
		}
	);

	let size = spring(10);
</script>

<div class="w-full h-24 my-5 bg-gray-300" on:click={handleMousemove}>
	<div class="relative flex p-10">
		<div>The mouse position is {m.x} x {m.y}</div>
		<div in:spin={{ duration: 2000 }} class="mx-10">
			<!-- <Vtag /> -->
		</div>

		<!-- <div on:mousemove={handleMousemove}> -->
	</div>
</div>
<div class="relative items-center w-full h-64 mt-5 text-pink-600 bg-gray-200 rounded-lg opacity-75">
	<div class="absolute top-0 right-0 z-10 m-5">
		<label>
			<h3>stiffness ({coords.stiffness})</h3>
			<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
		</label>

		<label>
			<h3>damping ({coords.damping})</h3>
			<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
		</label>
	</div>

	<svg
		class="relative"
		on:mousemove={(e) => coords.set({ x: e.offsetX, y: e.offsetY })}
		on:mousedown={() => size.set(30)}
		on:mouseup={() => size.set(10)}
	>
		<circle cx={$coords.x} cy={$coords.y} r={$size} />
	</svg>
</div>

<style>
	svg {
		width: 100%;
		height: 100%;
	}
	circle {
		fill: #ff3e00;
	}
</style>
